<template>
  <div class="commend-panel">
    <div class="carousel-panel" :style="{
      width:carouselWidth+'px',
      height:carouselWidth * 0.6 +'px'
    }">
      <el-carousel :height="carouselWidth * 0.6 +'px'"
                   indicator-position="none"
                   arrow="never"
                   ref="carouselRef"
                   @change="carouselChange">
        <el-carousel-item
            v-for="(item,index) in carouselVideoList"
            :key="item"
            :name="index+''">
          <div class="roll-image">
            <router-link :to="`/video/${item.videoId}`" target="_blank">
              <img :height="carouselWidth * 0.6 +'px'" :src="`${ImgURL}/img/${item.videoCover}`" :alt="item.videoName">
            </router-link>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="carousel-bottom" v-if="carouselVideoList.length>0">
        <div class="video-op">
          <router-link class="video-name" :to="`/video/${carouselVideoList[carouselIndex].videoName}`" target="_blank">
            {{carouselVideoList[carouselIndex].videoName}}
          </router-link>
          <div class="change-btn">
            <span class="iconfont icon-right" @click="preCarousel"></span>
            <span class="iconfont icon-left" @click="nextCarousel"></span>
          </div>
        </div>
        <div class="dto">
          <div :class="['dto-item',carouselIndex === item-1?'active':'']"
               v-for="item in carouselVideoList.length"
               @click="setCarousel(item)"
          >
          </div>
        </div>
      </div>
    </div>
    <div class="video-list">
      <div class="video-item" v-for="item in bodyVideoList1">
        <VideoItem
            :data="item"
        ></VideoItem>
      </div>
    </div>
  </div>
  <VideoList :categoryId="1"></VideoList>
</template>
<script setup>
import VideoList from "@/views/videoList/VideoList.vue"
import {getCurrentInstance, onBeforeMount, onMounted, onUnmounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {mitter} from "@/eventbus/eventBus.js";
import {ImgURL} from "@/utils/Request.js";
import {LoadRecommendVideo} from "@/api/video.js";
import VideoItem from "@/components/VideoItem.vue";
import userNavAction from "@/stores/navActionStore.js";
import video_loadRecommendVideo from "@/data/video_loadRecommendVideo.json";

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const NavActionStore = userNavAction();

const bodyVideoList = ref([]);
const carouselWidth = ref(0);
const resetCarouselWidth = () => {
  let width = (document.documentElement.clientWidth - proxy.bodyPadding )*0.44;
  if(width < 400){
    width = 400;
  }
  carouselWidth.value = width;
}
const carouselVideoList = ref([]);
const bodyVideoList1 = ref([])
const loadRecommend = async () => {
  const res = video_loadRecommendVideo;
  let cadata = [];
  let bodydata = [];
  for(let i=0;i<res.data.length;i++){
    if(res.data[i]){
      if(res.data[i].postType === "0"){
        cadata.push(res.data[i]);
      }else{
        bodydata.push(res.data[i]);
      }
    }
  }
  carouselVideoList.value = cadata;
  bodyVideoList.value = bodydata;
  for (let i=0;i<6;i++){
    bodyVideoList1.value.push(bodyVideoList.value[i]);
  }
}
const carouselIndex = ref(0);
const carouselChange = (e) => {
  carouselIndex.value = e;
}
const carouselRef = ref();
const preCarousel = () => {
  carouselRef.value.prev();
}
const nextCarousel = () => {
  carouselRef.value.next();
}
const setCarousel = (index) => {
  carouselRef.value.setActiveItem(index-1+"");
}
//监听窗口大小变化，重新计算轮播图宽度
window.addEventListener("resize",()=>{
  resetCarouselWidth();
});
onMounted(()=>{
  NavActionStore.setFixedHeader(true);
  NavActionStore.setFixedCategory(true);
  NavActionStore.setShowHeader(true);
  NavActionStore.setShowCategory(true);
  NavActionStore.setForceFixedHeader(false);
  mitter.on("windowResize",()=>{
    resetCarouselWidth();
  })
  resetCarouselWidth();
  loadRecommend();
});
onUnmounted(()=>{
  mitter.off("windowResize");
})
</script>
<style lang="scss" scoped>
.commend-panel{
  display: flex;
  margin-top: 20px;
  .carousel-panel{
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    .roll-image {
      position: relative;
      background: #e9e9e9;
      text-align: center;
      a {
        display: block;
      }
      img {
        max-width: 100%;
      }
    }
      .carousel-bottom{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50px;
        line-height: 30px;
        background: rgba(0,0,0,.6);
        padding: 10px;
        .video-op{
          display: flex;
          width: 95%;
        }
        .video-name{
            flex: 1;
            color: #fff;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
        .change-btn{
          margin-left: 10px;
          width: 60px;
          display: flex;
          justify-content: space-between;
          .iconfont{
            cursor: pointer;
            text-align: center;
            width: 25px;
            line-height: 25px;
            background: rgba(255,255,255,.1);
            border-radius: 5px;
            color: #fff;
          }
        }
      }
      .dto{
        display: flex;
        margin-top: 5px;
        align-items: center;
        .dto-item{
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #b0b0b0;
          cursor: pointer;
          margin-right: 10px;
        }
        .active{
          width: 15px;
          height: 15px;
          background: #fff;
        }
    }
  }
  .video-list{
    margin-left: 10px;
    flex: 1;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(3,1fr);
  }
}
</style>